<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deepsleep@313</title>

    <script src="../static/js/marked.min.js"></script>
    <script src="../static/js/highlight.min.js"></script>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/libs/highlight.js/11.9.0/styles/github.min.css"> -->
    <link rel="stylesheet" href="../static/css/chat_rag.css">
</head>
<body>
    <!-- 知识库管理弹窗 -->
<div id="knowledge-base-modal" >
    <h3>知识库管理</h3>

    <!-- 创建知识库部分 -->
    <div>
        <h4>创建知识库</h4>
        <input type="text" id="kb-name" placeholder="请输入知识库名称"  />
        <input type="file" id="kb-files" multiple accept=".txt,.pdf"  />
        <button id="create-kb-btn" style="">提交</button>
    </div>

    <hr style="margin: 20px 0;" />

    <!-- 选择/删除知识库部分 -->
    <div>
        <h4>选择/删除知识库</h4>
        <div id="kb-list" style=""></div>
        <div style="margin-bottom: 10px;">
            <!-- selected-kb-name 这个标记着当前使用的知识库-->
            当前选择的知识库：<span id="selected-kb-name" ></span>
        </div>
        <div>
            <label><input type="radio" name="kb-action" value="select" checked> 选择知识库</label><br/>
            <label><input type="radio" name="kb-action" value="delete"> 删除知识库</label>
        </div>
        <button id="confirm-kb-action" >确认</button>
    </div>

    <!-- 关闭按钮 -->
    <button id="close-kb-button" onclick="document.getElementById('knowledge-base-modal').style.display = 'none';" style="position: absolute; top: 10px; right: 10px;">×</button>
</div>

    <div id="app-container">
        <div id="sidebar">
            <div id="sidebar-header">
                <button id="new-chat-button">＋ New Chat</button>
            </div>
            <ul id="conversation-list"></ul>
            <button id="user-management-button">
             <img src="../static/images/default-avatar.png" alt="User Avatar" class="user-avatar">
             <span id="user-management-button-span"></span>

           </button>
            <div id="user-panel">
                <div class="user-info">
                  <img src="../static/images/default-avatar.png" alt="User Avatar" class="user-avatar-large">

                  <h3 id="username">用户名</h3>
                  <p id="user-email">user@example.com</p>

                </div>
                <button id="logout-button">登出</button>
              </div>
        </div>

        <div id="chat-container">
            <div id="chat-toolbar">
                <button id="sidebar-toggle" title="Toggle Sidebar">
                    <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>
                </button>
                <div class="toolbar-group">
                    <label for="model-selector">选择模型:</label>
                    <select id="model-selector">
                        <option value="qwen-plus">qwen-plus</option>
                        <option value="NULL">NULL</option>
                    </select>
                    <label for="mode-selector">聊天模式:</label>
                    <select id="mode-selector">
                        <option value="点击选择模式" style="display: none">点击选择模式</option>
                        <option value="普通聊天">普通聊天</option>
                        <option value="RAG">RAG</option>
                    </select>
                </div>



            </div>

            <div id="chat-window"></div>
            <div class="toolbar-group-new">
                    <!-- 在 chat_rag.html 的 toolbar 区域添加如下按钮 -->
                    <button id="open-kb-modal" >知识库管理</button><br>
                    <span>知识库：</span>
                    <span id="selected-kb-name-on-toolbar" ></span>
                </div>
            <div id="chat-form-container">
                <form id="chat-form" enctype="multipart/form-data">
                    <div id="image-preview-container"></div>
                    <!-- 新增音频预览容器 -->
                    <div id="audio-preview-container"></div>
                    <div id="prompt-input-wrapper">
                        <!-- 新增文生图功能开关 -->
                        <div class="text-to-image-toggle">
                            <label for="enable-txt2img">文生图</label>
                            <input type="checkbox" id="enable-txt2img" name="enable-txt2img" >
                            <span class="toggle-slider"></span>
                        </div>

                        <textarea id="prompt-input" placeholder="" rows="1"></textarea>
                        <div class="form-buttons">
                            <!-- 新增音频上传按钮 -->
                            <input type="file" id="audio-upload" accept="audio/*" style="display: none;" multiple>
                            <button type="button" class="icon-button" title="Upload audio"
                                    onclick="document.getElementById('audio-upload').click();">
                                <svg viewBox="0 0 24 24"><path d="M12,14.5A3.5,3.5 0,0 1,9.5 12A3.5,3.5 0,0 1,12 9.5A3.5,3.5 0,0 1,14.5 12M12,8A5,5 0,0 0,7.5 13A"></path></svg>
                            </button>
                            <!-- 原有图片上传按钮保持不变 -->
                            <input type="file" id="image-upload" accept="image/*" style="display: none;" multiple>
                            <button type="button" class="icon-button" title="Upload image"
                                    onclick="document.getElementById('image-upload').click();">
                                <svg viewBox="0 0 24 24"><path d="M21.58,16.09,14.67,7.5c-1-1.17-2.79-1.17-3.79,0L3.42,16.09A2,2,0,0,0,5.14,19H19.31a2,2,0,0,0,1.72-2.31Z M6.86,17,11,12l4.14,5Z"></path></svg>
                            </button>
                            <!-- 发送按钮保持不变 -->
                            <button type="submit" id="send-button" class="icon-button" title="Send">
                                <svg viewBox="0 0 24 24"><path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path></svg>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="../static/js/chat_rag.js"></script>
</body>
</html>